<template>
  <view style="padding: 0 24rpx;">
    <view class="no-data" v-if="list.length == 0">暂无数据</view>
    <view class="form" v-for="(item, index) in list" :key="index">
      <view class="form-delete" @tap="deleteType(item)">删除</view>
      <view class="form-edit" @tap="eittType(item)">编辑</view>
      <view class="form-item" v-if="item.withdraw_value==1">
        <view class="form-item-left">微信</view>
        <view class="form-item-right">{{ item.wx_pay }}</view>
      </view>
      <view class="form-item" v-if="item.withdraw_value==2">
        <view class="form-item-left">支付宝</view>
        <view class="form-item-right">{{ item.ali_pay }}</view>
      </view>
      <view class="form-item" v-if="item.withdraw_value==3">
        <view class="form-item-left">银行卡号</view>
        <view class="form-item-right">{{ item.card_num }}</view>
      </view>
      <view class="form-item" v-if="item.withdraw_value==3">
        <view class="form-item-left">银行名称</view>
        <view class="form-item-right">{{ item.card_bank }}</view>
      </view>
      <view class="form-item" v-if="item.withdraw_value==3">
        <view class="form-item-left">持卡人姓名</view>
        <view class="form-item-right">{{item.card_name}}</view>
      </view>
    </view>
    <view class="submit">
      <view class="submit-btn" @tap="add">添加</view>
    </view>
    <uni-popup ref="popup" type="top">
      <view class="content">
        <view class="pay-ipt">
          <text>类型</text>
          <picker style="flex: 1" @change="withdrawChange" :range="withdraw_typeArr" :range-key="'label'">
            <text>{{ withdraw_value.label || '请选择提现方式' }}</text>
          </picker>
        </view>
        <view class="pay-ipt" v-if="withdraw_value.value==1">
          <text>微信</text>
          <input v-model="wx_pay" placeholder="请输入微信号" />
        </view>
        <view class="pay-ipt" v-if="withdraw_value.value==2">
          <text>支付宝</text>
          <input v-model="ali_pay" placeholder="请输入支付宝号" />
        </view>
        <view class="pay-ipt" v-if="withdraw_value.value==3">
          <text>持卡人</text>
          <input v-model="card_name" placeholder="持卡人姓名" />
        </view>
        <view class="pay-ipt" v-if="withdraw_value.value==3">
          <text>支行名称</text>
          <input v-model="card_bank" placeholder="请输入所属银行支行名称" />
        </view>
        <view class="pay-ipt" v-if="withdraw_value.value==3">
          <text>卡号</text>
          <input type="number" v-model="card_num" placeholder="银行卡号" />
        </view>
        <view class="save" @tap="saveType">保存</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        userInfo: {},
        withdraw_typeArr: [{
            value: 1,
            label: '微信'
          },
          {
            value: 2,
            label: '支付宝'
          },
          {
            value: 3,
            label: '银行卡'
          },
        ],
        withdraw_value: {},
        wx_pay: '',
        ali_pay: '',
        card_num: '',
        card_name: '',
        card_bank: ''
      }
    },
    onShow() {
      this.userInfo = vk.getVuex('$user.userInfo')
      this.getList()
    },
    methods: {
      add() {
        this.$refs.popup.open()
      },
      eittType(item) {
        this.editId = item._id
        this.$refs.popup.open()
        this.withdraw_value = this.withdraw_typeArr[item.withdraw_value]
        this.wx_pay = item.wx_pay
        this.ali_pay = item.ali_pay
        this.card_num = item.card_num
        this.card_name = item.card_name
        this.card_bank = item.card_bank
      },
      getList() {
        uni.showLoading({
          title: '加载中...'
        })
        vk.callFunction({
          url: 'user/kh/withdrawTypeList',
          data: {
            user_id: this.userInfo._id
          },
          success: (res) => {
            uni.hideLoading()
            this.list = res.rows
          }
        })
      },
      withdrawChange(e) {
        this.withdraw_value = this.withdraw_typeArr[e.detail.value]
      },
      deleteType(item) {
        let that = this;
        uni.showModal({
          title: "提示",
          content: "确定要删除吗",
          success: function(res) {
            if (res.confirm) {
              that.trueDeleteType(item);
            }
          },
        });
      },
      trueDeleteType(item) {
        uni.showLoading({
          title: '加载中...'
        })
        vk.callFunction({
          url: 'user/kh/withdrawTypeDelete',
          data: {
            _id: item._id
          },
          success: (res) => {
            uni.hideLoading()
            this.getList()
          }
        })
      },
      saveType() {
        let str = ''
        if (!this.withdraw_value.value) {
           str = '类型不能为空'
        }
        if (this.withdraw_value.value == 1) {
          if (!this.wx_pay) {
            str = '微信号不能为空'
          }
        }
        if (this.withdraw_value.value == 2) {
          if (!this.ali_pay) {
            str = '支付宝号不能为空'
          }
        }
        if (this.withdraw_value.value == 3) {
          if (!this.card_name) {
            str = '持卡人姓名不能为空'
          }
          if (!this.card_bank) {
            str = '银行支行名称不能为空'
          }
          if (!this.card_num) {
            str = '银行卡号不能为空'
          }
        }
        if (str) {
          return vk.toast(str, 'none');
        }
        uni.showLoading({
          title: '加载中...'
        })
        let obj = {
            withdraw_value: this.withdraw_value.value,
            withdraw_type: this.withdraw_value.label,
            wx_pay: this.wx_pay,
            ali_pay: this.ali_pay,
            card_num: this.card_num,
            card_name: this.card_name,
            card_bank: this.card_bank,
            user_id: this.userInfo._id
          }
          if (this.editId) {
            obj._id = this.editId
          }
        vk.callFunction({
          url: 'user/kh/withdrawTypePost',
          data: obj,
          success: (res) => {
            uni.hideLoading()
            this.getList()
            this.$refs.popup.close()
            this.withdraw_value = {}
            this.wx_pay = ''
            this.ali_pay = ''
            this.card_num = ''
            this.card_name = ''
            this.card_bank = ''
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    width: 690upx;
    height: 660upx;
    margin-top: 100rpx;
    background: #FFFFFF;
    box-shadow: 0upx 2upx 10upx 0upx rgba(178, 186, 191, 0.4);
    border-radius: 16upx;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-title {
      font-size: 40rpx;
      padding-top: 32rpx;
      text-align: center;
      font-family: DIN;
      font-size: 70rpx;
      font-style: normal;
      font-weight: 500;
      color: #1D2129;
    }

    .pay-ipt {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #979797;
      font-size: 40upx;
      color: #2B2B2B;
      line-height: 84upx;
      width: 634upx;
      margin-top: 20upx;
      position: relative;

      text {
        width: 200upx;
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #515151;
      }

      input {
        flex: 1;
        font-size: 28upx;
        color: #333;
        line-height: 40upx;
      }

      .sign {
        position: absolute;
        left: 180upx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2B2B2B;
      }
    }
  }
.no-data {
    width: 100%;
    text-align: center;
    font-family: PingFang SC;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
    margin-top: 100rpx;
  }
    .form {
      padding: 0 32rpx;
      width: 638rpx;
      background-color: #fff;
      border-radius: 8rpx;
      margin-top: 24rpx;
      position: relative;
      &-delete {
        position: absolute;
        right: 100rpx;
        top: 20rpx;
        color: #F00;
        font-size: 24rpx;
      }
      &-edit {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        color: #005ECD;
        font-size: 24rpx;
      }

      &-item {
        display: flex;
        align-items: center;
        height: 88rpx;

        &-left {
          color: #5A5A5A;
          font-family: PingFang SC;
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
          width: 218rpx;
        }

        &-right {
          flex: 1;
          color: #000;
          font-family: PingFang SC;
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
        }
      }
    }

.save {
    width: 500rpx;
    height: 74rpx;
    line-height: 74rpx;
    background-color: #005ECD;
    border-radius: 100rpx;
    text-align: center;
    color: #fff;
    font-family: PingFang SC;
    font-size: 26rpx;
    font-style: normal;
    font-weight: 500;
    margin-top: 42rpx;
}
    .submit {
      position: fixed;
      left: 0;
      bottom: calc(var(--safe-area-inset-bottom) + 40rpx);
      width: 100%;
      height: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      &-btn {
        width: 730rpx;
        height: 74rpx;
        line-height: 74rpx;
        background-color: #005ECD;
        border-radius: 100rpx;
        text-align: center;
        color: #fff;
        font-family: PingFang SC;
        font-size: 26rpx;
        font-style: normal;
        font-weight: 500;
      }
    }
</style>